import React from 'react';
import moment from 'moment';
import { Modal, Button } from 'antd';
import { PieChart, Pie, Tooltip, Cell, Legend } from 'recharts';
import Table from '../Table/Table';
import styles from './Styles.scss';
import wico from '../../assets/wicologo.png';

const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
  const x = cx + radius * Math.cos(-midAngle * RADIAN);
  const y = cy + radius * Math.sin(-midAngle * RADIAN);
  return (
    <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} 	dominantBaseline="central">
      {`${(percent * 100).toFixed(0)}%`}
    </text>
  );
};
const RADIAN = Math.PI / 180;

// const piedata = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
//   {name: 'Group C', value: 300}, {name: 'Group D', value: 200}];
const piedata = [{name: '小于10分钟', value: 340}, {name: ' 10-30分钟', value: 244},
  {name: '30-120分钟', value: 322}, {name: '2-4小时', value: 187},
  {name: '4-8小时', value: 278}, {name: '大于8小时', value: 189}];
const COLORS = ['#0000CC','#0088F9', '#00C49F', '#559988','#FFBB28', '#FF8042',];

export default class Signup extends React.Component {
  state = {
    showNewCompanyModal: false,
  };

  render() {
    const date = [0,1,2,3,4,5,6].map((i) => moment().subtract(i, 'days').format("YYYY-MM-DD"))

    const keys = [
      {name:"time", display: "时间"},{name:"total",display:"累计人数"},{name:"first",display:"首次到店"},
      {name:"new",display:"新用户"},{name:"not",display:"未进店"},{name:"login",display:"接入用户"},
      {name:"notFirst",display:"非新用户"},{name:"rate1",display:"转换率"},{name:"rate2",display:"进店率"},
      {name:'rate3',display:"返店率"},{name:"staytime",display:"平均驻留时间"}
    ];

    const data = [
      {time: '总计', total: '4232', first: '148', new: 59, not: 728892, login: 7782, notFirst: 2373, rate1: '23.7%', rate2: '0.62%', rate3: '95.6%', staytime: '123分钟'},
      {time: '7天总计', total: '60', first: '6', new: 2, not: 1499, login: 7782, notFirst: 69, rate1: '23.7%', rate2: '4.62%', rate3: '95.6%', staytime: '223分钟'},
      {time: date[0], total: '5', first: '0', new: 1, not: 234, login: 1182, notFirst: 12, rate1: '55.7%', rate2: '7.75%', rate3: '89.5%', staytime: '143分钟'},
      {time: date[1], total: '8', first: '2', new: 0, not: 366, login: 1345, notFirst: 13, rate1: '60.5%', rate2: '4.34%', rate3: '97.4%', staytime: '310分钟'},
      {time: date[2], total: '7', first: '1', new: 0, not: 123, login: 922, notFirst: 11, rate1: '43.7%', rate2: '3.53%', rate3: '86.3%', staytime: '189分钟'},
      {time: date[3], total: '12', first: '0', new: 0, not: 299, login: 1270, notFirst: 6, rate1: '76.7%', rate2: '4.42%', rate3: '85.7%', staytime: '193分钟'},
      {time: date[4], total: '5', first: '1', new: 1, not: 238, login: 893, notFirst: 7, rate1: '52.7%', rate2: '5.43%', rate3: '94.6%', staytime: '173分钟'},
      {time: date[5], total: '13', first: '1', new: 0, not: 111, login: 783, notFirst: 10, rate1: '34.5%', rate2: '3.33%', rate3: '98.3%', staytime: '243分钟'},
      {time: date[6], total: '10', first: '1', new: 0, not: 289, login: 1787, notFirst: 10, rate1: '59.7%', rate2: '6.52%', rate3: '89.4%', staytime: '198分钟'},
    ];

    return (
      <div>
        <Table
          data={data}
          keys={keys}
          styles={styles}
          operations={[{
            title: '查看',
            type: 'primary',
            callback:(d)=>{
              this.setState({ showNewCompanyModal: true });
            },
          }]}
        />
        <Modal
          width={400}
          title="驻留时间分布"
          visible={this.state.showNewCompanyModal}
          footer={null}
          onCancel={() => this.setState({ showNewCompanyModal: false })}
        >
          <PieChart width={600} height={200} onMouseEnter={this.onPieEnter}>
            <Pie
              data={piedata}
              cx={100}
              cy={90}
              labelLine={false}
              label={renderCustomizedLabel}
              outerRadius={80}
              fill="#8884d8"
            >
              {
                piedata.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
              }
            </Pie>
            <Legend verticalAlign="top" layout="vertical" iconSize={20} height={36}/>
          </PieChart>
          <Button
            type="primary"
            onClick={() => this.setState({ showNewCompanyModal: false })}
          >
            关闭
          </Button>
        </Modal>
      </div>
    )
  }
}

      // <div style={{marginBottom: '20px'}}>
        //   <span style={{paddingRight:'20px'}}><Button type="primary">设置</Button></span>
        //   <span style={{paddingRight:'20px'}}><Button type="primary">帮助</Button></span>
        //   <span style={{paddingRight:'20px'}}><Button type="primary">统计区域(AP组)</Button></span>
        //   <span style={{paddingRight:'20px'}}><Button type="primary">{`${date[6]}-${date[0]}`}</Button></span>
        // </div>


